<template>
  <div class="pagination">
    <!-- 左侧按钮 -->
    <button
      class="iconfont icon-arrow-left"
      @click="myPage--"
      :disabled="myPage <= 1"
    ></button>
    <!-- 固定按钮 1 -->
    <button :class="myPage == '1' ? 'active' : ''" @click="myPage = 1">
      1
    </button>
    <!-- 省略按钮 -->
    <button
      class="iconfont icon-ellipsis"
      v-show="myPage >= 5 && totalPage > 7"
    ></button>
    <!-- 遍历按钮 -->
    <button
      v-for="item in startEnd.end - startEnd.start + 1"
      :key="item"
      :class="myPage == item + startEnd.start ? 'active' : ''"
      @click="myPage = item + startEnd.start"
    >
      {{ item + startEnd.start }}
    </button>
    <!-- 右侧省略按钮 -->
    <button
      class="iconfont icon-ellipsis"
      v-show="myPage < totalPage - 3 && totalPage > 7"
    ></button>
    <!-- 右侧最终页按钮 -->
    <button
      :class="myPage == totalPage ? 'active' : ''"
      v-show="totalPage !== 1"
      @click="myPage = totalPage"
    >
      {{ totalPage }}
    </button>
    <button
      class="iconfont icon-arrow-right"
      @click="myPage++"
      :disabled="myPage >= totalPage"
    ></button>
    <select v-model="myPageunit">
      <option :value="page" v-for="page in pageSizes" :key="page">
        {{ page }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  data() {
    return {
      timer: null,
      isDone: false,
      //当前页码 this.pageNo
      myPage: this.pageNo,
      //每页显示条数 this.pageSize
      myPageunit: this.pageSize,
      pageSizes: [5, 10, 15, 20],
    };
  },
  props: ["pageNo", "pageSize", "total"],
  methods: {},
  computed: {
    //总页数
    totalPage() {
      return Math.ceil(this.total / this.myPageunit);
    },
    //计算渲染开始结束位置
    startEnd() {
      //过去到总页数和当前页数
      let { myPage, totalPage } = this;
      //只有一页或者两页时
      if (totalPage <= 2) {
        return {
          start: 2,
          end: 1,
        };
      }
      //页数小于7是
      if (totalPage <= 7) {
        return {
          start: 1,
          end: totalPage - 2,
        };
      }
      if (myPage < 5) {
        return {
          start: 1,
          end: 5,
        };
      }
      if (myPage <= totalPage - 4) {
        return {
          start: myPage - 3,
          end: myPage + 1,
        };
      }
      return {
        start: totalPage - 6,
        end: totalPage - 2,
      };
    },
  },
  watch: {
    //监视页数个每页条数是否发生变化 变化后触发事件重新请求数据
    myPage: {
      /* 第一个参数是更新后的参数 第二个是上一次的参数 */
      handler(newValue) {
        if (this.isDone) {
          //如果是从下面回调执行到这里则直接让他return
          this.isDone = false;
          return;
        }
        //防抖 每次间隔时间小于300ms 则定时器会被清除 里面的代码将不会执行,最后一次会执行
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.$emit("updatePageNo", newValue);
        }, 300);
      },
    },
    myPageunit: {
      handler(newValue) {
        let newTotal = Math.ceil(this.total / newValue);
        console.log(newValue);
        if (this.myPage > newTotal) {
          //如果需要改变当前页码则将这个状态改变,使上面的函数不用触发,调用两次请求
          this.isDone = true;
          this.myPage = newTotal;
        }
        this.$emit("updatePageSize", {
          myPage: this.myPage,
          pageSize: newValue,
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  button {
    width: 24px;
    line-height: 24px;
    margin: 0 6px;
    padding: 0;
    outline: none;
    border: 1px solid #eaeaea;
    background-color: #eee;
    border-radius: 3px;
  }
}
.active {
  background-color: #409eff !important;
  color: #eee;
}
</style>